﻿/// <reference path="../jquery-1.4.4.js" />
/// <reference path="../jquery-1.4.4-vsdoc.js" />

/*!  
** Copyright (c) 2011 Ray Liang (http://www.dotnetage.com)
** Dual licensed under the MIT and GPL licenses:
** http://www.opensource.org/licenses/mit-license.php
** http://www.gnu.org/licenses/gpl.html
** 
**----------------------------------------------------------------
** title        : DJME tags
** version   : 2.0.1
** modified: 2010-2-13
** depends:
**    jquery.ui.core.js
**    jquery.ui.widget.js
**----------------------------------------------------------------
*/

(function ($) {
    $.widget("ui.tags", {
        options:
        {
            event: "click",
            pos: "left",
            selectedIndex: 0,
            select: null,
            show: null
        },
        _create: function () {
            var self = this, opts = this.options, el = this.element, layout = opts.pos, _parent = el.parent(),
            // h = _parent.height() - parseInt(_parent.css("padding-top")) - parseInt(_parent.css("padding-bottom")) - 2;
             _table = $("<table></table>").appendTo(el)
                                                                .attr("cellpadding", "0")
                                                                .attr("cellspacing", "0")
                                                                .css({ "width": "100%" }),

            _tr = $("<tr></tr>").appendTo(_table),

            _leftCol = $("<td></td>").appendTo(_tr)
                                                     .attr("valign", "top"),

            _rightCol = $("<td></td>").appendTo(_tr)
                                                       .attr("valign", "top");

            if ((layout != "left") && (layout != "right"))
                layout = "left";

            el.addClass("ui-corner-all ui-widget-header")
              .css({
                  "padding": "5px",
                  "background-position": "0 0"
              });


            if (opts.select)
                el.bind("tagselect", opts.select);
            if (opts.show)
                el.bind("tagshow", opts.show);

            var ul = el.find("ul:first"),
            _panels = $(">div", el);

            if (ul.length > 0) {
                if (layout == "left") {
                    ul.appendTo(_leftCol);
                    //.css("padding-right", "11px");
                    if (_panels.length) _panels.appendTo(_rightCol);
                    _leftCol.css({
                        "white-space": "nowrap",
                        "width": "80px"
                    });
                }
                else {
                    ul.appendTo(_rightCol);
                    //                    if (layout == "left")
                    //                     ul.css("padding-left", "11px");
                    if (_panels.length) _panels.appendTo(_leftCol);
                    _rightCol.css({
                        "white-space": "nowrap",
                        "width": "80px"
                    });
                }

                ul.addClass("ui-helper-reset")
                   .addClass("ui-tags-nav")
                   .css({ "display": "block" });

                ul.children("li").each(function (i, n) {
                    var $I = $(this);
                    if (layout == "left")
                        $I.addClass("ui-state-default ui-corner-left").css({ "height": "30px", "border-right": "none" });
                    else
                        $I.addClass("ui-state-default ui-corner-right").css({ "height": "30px", "border-left": "none" });

                    $I.hover(function () { $(this).addClass("ui-state-hover"); }, function () { $(this).removeClass("ui-state-hover"); });

                    $I.find("a:first").bind(opts.event, function () {
                        self.selectTag($(this).parent());
                        el.trigger("tagselect", {
                            index: i,
                            tag: $(this).parent(),
                            panel: $($(this).attr("href"))
                        });
                        return false;
                    });

                    if (i == 0)
                        $I.css({ "margin-top": "0px" });
                    else
                        $I.css({ "margin-top": "2px" });

                    if (i == opts.selectedIndex)
                        $I.addClass("ui-state-active").addClass("ui-state-focus")

                    var _link = $("a", this);
                    _link.css({ "display": "inline-block", "padding": "6px" });
                    var _container = $(_link.attr("href"));
                    if (_container.length > 0) {
                        _container.wrap("<div></div>");

                        var _corner = "ui-widget-content ui-corner-left";
                        if (layout == "left")
                            _corner = "ui-widget-content ui-corner-right";

                        _container.addClass(_corner).css({ "padding": "5px" });

                        _container.parent().addClass(_corner)
                                                   //.addClass("ui-state-active")
                                                   .css({
                                                       "padding": "5px",
                                                       "background-position": "0 0",
                                                       //"width": "100%",
                                                       "display": "none", "overflow": "visible"
                                                   });
                        _container.css({ "overflow": "visible" });

                        if (layout == "left")
                            _container.parent().css({ "border-left": "none" });
                        else
                            _container.parent().css({ "border-right": "none" });

                        if (i == opts.selectedIndex)
                            _container.parent().show();
                    }
                });
            }
        },
        setIndex: function (value) {
            if (this.options.selectedIndex != value) {
                this.selectTag($(">table>tr>td>ul>li", this.element).get(value));
            }
        },
        selectTag: function (el) {
            var self = this, opts = this.options, $tag = $(el), _panel = $($("a", el).attr("href"));

            $(">table>tbody>tr>td>ul>li", self.element).removeClass("ui-state-active")
                                                                     .removeClass("ui-state-focus");

            $(el).addClass("ui-state-active")
                  .addClass("ui-state-focus");

            $(">div", _panel.parent().parent()).hide();
            _panel.parent().show();
            opts.selectedIndex = $(">table>tbody>tr>td>ul>li", self.element).index(el);

            this.element.trigger("tagshow", {
                index: opts.selectedIndex,
                tag: $tag,
                panel: _panel
            });
        },
        remove: function (value) {
            var self = this, opts = this.options, el = this.element, _tag = $(">ul>li", el).get(value),
            _panel = $($("a", _tag).attr("href"));
            $(_tag).unbind();
            $(_tag).remove();
            _panel.remove();
        }
    });

})(jQuery);   